<!DOCTYPE html>
<html>
<head>
    <title>Chat Demo</title>
    <!-- KaTeX CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
    <!-- Markdown CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.2.0/github-markdown.min.css">

    <style>
        .message-content {
            overflow-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
            min-height: 1.5em;
            transition: all 0.2s ease;
            margin: 10px;
            padding: 10px;
            border: 1px solid #eee;
        }
        
        .typing-cursor {
            display: inline-block;
            width: 2px;
            height: 1em;
            background: #000;
            margin-left: 2px;
            animation: blink 1s infinite;
        }
        
        @keyframes blink {
            50% { opacity: 0; }
        }
    </style>
</head>
<body>
<div id="message-display" class="message-content markdown-body"></div>

<!-- 核心库 -->
<script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>

<script>
    class ChatUI {
        constructor(container) {
            this.container = container;
            this.currentContent = '';

            // 配置 marked
            marked.setOptions({
                breaks: true,
                gfm: true
            });
        }

        // 处理数学公式
        renderMath(text) {
            // 行内公式
            text = text.replace(/\$(.+?)\$/g, (match, formula) => {
                try {
                    return katex.renderToString(formula);
                } catch (e) {
                    return match;
                }
            });

            // 块级公式
            text = text.replace(/\$\$([\s\S]+?)\$\$/g, (match, formula) => {
                try {
                    return katex.renderToString(formula, { displayMode: true });
                } catch (e) {
                    return match;
                }
            });

            return text;
        }

        async appendText(text, isStreaming = false) {
            if (isStreaming) {
                // 流式输出
                for (let i = 0; i < text.length; i++) {
                    await new Promise(resolve => setTimeout(resolve, 50));
                    this.currentContent += text[i];
                    // 先处理数学公式，再处理 Markdown
                    const mathProcessed = this.renderMath(this.currentContent);
                    this.container.innerHTML = marked.parse(mathProcessed);

                    // 添加光标效果
                    if (i < text.length - 1) {
                        const cursor = document.createElement('span');
                        cursor.className = 'typing-cursor';
                        this.container.appendChild(cursor);
                    }
                    this.container.scrollIntoView({ behavior: 'smooth', block: 'end' });
                }
            } else {
                // 直接输出
                this.currentContent += text;
                const mathProcessed = this.renderMath(this.currentContent);
                this.container.innerHTML = marked.parse(mathProcessed);
                this.container.scrollIntoView({ behavior: 'smooth', block: 'end' });
            }
        }
    }

    // 创建单例
    const chat = new ChatUI(document.getElementById('message-display'));
</script>
</body>
</html>
